<script setup lang="ts"></script>
<template>
<a-form>
    <a-form-item v-bind="validateInfos.tel">
        <a-input label="Activity name" v-model:value="modelRef.tel" required autocomplete="off" placeholder="请输入常用手机号" />
    </a-form-item>
    <a-form-item v-bind="validateInfos.code">
        <a-row>
            <a-col :span="17">
                <a-input v-model:value="modelRef.code" required type="password" autocomplete="off" placeholder="请输入验证码" />
            </a-col>
            <a-col :span="6">
                <a-button type="primary" @click="getCode">{{countdown.buttnTxt}}</a-button>
            </a-col>
        </a-row>
    </a-form-item>
    <a-form-item>
        <p class="forgot">忘记密码？</p>
    </a-form-item>
    <a-form-item>
        <a-button type="primary" @click.prevent="onSubmit" block size="large">登 录</a-button>
    </a-form-item>
</a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw ,ref} from 'vue';
import { Form } from 'ant-design-vue';
// import CountdownButton from '@/components/common/countdown-button.vue'

const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const modelRef = reactive({
      tel: '',
      code:'',
    });
    const rulesRef = reactive({
      tel: [
        {
          required: true,
          message: '请输入常用手机号',
        },
      ],
      code: [
        {
          required: true,
          message: '请输入验证码',
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef));
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    const codeTxt=<string>('获取验证码')
    const countdown =reactive({
      count : ref<number>(60),
      timer:null,
      clicked:ref<boolean>(true),
      suffixText:'后重试',
      buttnTxt:codeTxt,
      autoCountDown:ref<boolean>(true),
    });
    const getCode =()=>{
        if (countdown.autoCountDown) {
        countdown.clicked = true;
        countDownFun()
      }
    }
    const countDownFun = () => {
      if (countdown.count == 0) {
        countdown.clicked = false;
        countdown.buttnTxt = codeTxt;
        return;
      } else {
        countdown.buttnTxt = countdown.count + " 秒" + countdown.suffixText;
        countdown.count--;
      }
      setTimeout(function() {
        countDownFun();
      }, 1000);
    }
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      countdown,
      getCode
    };
  },
});
</script>

<style lang="less" scoped>
.forgot {
    color: rgba(42, 130, 228, 1);
    font-size: 14px;
    text-align: right;
    margin-bottom: 32px;
    cursor: pointer;
}

.ant-input {
    border: none;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    height: 40px;
}
</style>
